<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>评论区</title>
</head>
<body>
<p>评论<strong th:text="${user.nickname}"></strong></p>
<input type="text" id="paretid" name="paretid" hidden><br>
<input style="width: 300px;height: 30px" type="text" placeholder="写评论" name="content" id="content"><button id="but1">发表评论</button><br>
<div id="div">
    <div  th:each="state:${state}" style="width: 400px;border: 1px solid black">
        <span style="color: blue" th:text="${state.luozhu.nickname}"></span><span style="color: gray;margin-left: 10px" th:text="${state.luozhu.createDateTime}"></span><br>
        <span style="margin-left: 5px"   th:text="${state.luozhu.content}"></span><br>
        <a  th:href="@{/delte(id=${state.luozhu._id})}" style="margin-left: 10px;float: right">删除</a>
        <a th:href="@{/update(id=${state.luozhu._id})}" style="margin-left: 10px;float: right">点赞(<span th:text="${state.luozhu.likenum}"></span>)</a>
        <a id="but2" href="#" style="margin-left: 10px;float: right">
            <span id="articleId" style="display: none" th:text="${state.luozhu.articleId}"></span>
            回复(<span th:text="${state.luozhu.replunum}"></span>)</a><br>
        <div style="margin-left: 30px;border: 1px solid black;padding-bottom: 25px;" th:each="zilou:${state.zilou}">
            <p th:text="${zilou.nickname}" style="color: blue"></p>
            <p style="margin-left: 5px" th:text="${zilou.content}"></p>
            <p>
                <a  th:href="@{/delte(id=${zilou._id})}" style="margin-left: 10px;float: right">删除</a>
                <a th:href="@{/update(id=${zilou._id})}" style="margin-left: 10px;float: right">点赞(<span th:text="${zilou.likenum}"></span>)</a>
            </p>
        </div>
    </div>
</div>
</body>
<script>
    $(function () {
        $("#but1").click(function () {
            if($("#content").val()!=""){
                var content= $("#content").val()
                if ($("#paretid").val()==""){
                    var paretid="0"
                } else {
                    var paretid=$("#paretid").val()
                }
                $.ajax({
                    url: '/add',
                    type: 'post',
                    dataType: 'json',
                    data:{
                        content:content,
                        paretid:paretid
                    },success:function(){
                        window.location.href = "/list";
                    }
                })
            }else {
                alert("评论不能为空")
            }
        })
        $("#div").on("click", "#but2", function() {
            $("#paretid").val($(this).find("#articleId").text())
        })




    })

</script>
</html>